<template>
  <div class="wap-container enMySpareCenter" id="container">
    <section class="top bgfff" >
      <div v-bind:class="{select: Gparam.type === 1}" @click="chooseBar">好件</div>
      <div v-bind:class="{select: Gparam.type === 2}" @click="chooseBar">坏件</div>
    </section>

    <section>
      <div class="goodSpareList" v-if="Gparam.type === 1">
        <ul v-for="item in goodSpareList" class="space-info bgfff ml10 mt10 mr10">
          <li class="rowflex">
            <div class="info-item c666 ">物料编码</div>
            <div>{{item.id}}</div>
          </li>
          <li class="rowflex">
            <div class="info-item c666">物料名称</div>
            <div>{{item.name}}</div>
          </li>
          <li class="rowflex">
            <div class="info-item c666">拥有数量</div>
            <div>{{item.num}}个</div>
          </li>
        </ul>
        <div class="apply-btn" @click="applySpace">申请备件</div>
      </div>


      <div class="badSpareList" v-if="Gparam.type === 2">
        <ul v-for="item in badSpareList" class="space-info bgfff ml10 mt10 mr10" @click="mark(item)" v-bind:class="{marking: item.isMark}">
          <li class="rowflex">
            <div class="info-item c666 ">物料编码</div>
            <div>{{item.id}}</div>
          </li>
          <li class="rowflex">
            <div class="info-item c666">物料名称</div>
            <div>{{item.name}}</div>
          </li>
          <li class="rowflex">
            <div class="info-item c666">拥有数量</div>
            <div>{{item.num}}个</div>
          </li>
        </ul>
        <div class="apply-btn" @click="backSpace">坏件退回</div>
      </div>
    </section>
  </div>
</template>

<script>
    export default {
      name: "EnMySpareCenter",
      data() {
        return{
          Gparam:{
            type: 1,
          },
          goodSpareList: [
            {
              id: 'YT2.241.05131',
              name: '打印机',
              num: '2',
            },
            {
              id: 'YT2.241.05131',
              name: '打印机',
              num: '2',
            },
            {
              id: 'YT2.241.05131',
              name: '打印机',
              num: '2',
            },
          ],
          badSpareList: [
            {
              id: 'YT2.241.05131',
              name: '打印机',
              num: '2',
              isMark: false,
            },
            {
              id: 'YT2.241.05131',
              name: '打印机',
              num: '200',
              isMark: false,
            },
          ],
        }
      },
      mounted() {
        this.$http.get('/work/api/engineer/inventory/me').then(res=>{
          console.log(res.data.data.rows)
        })
      },
      methods: {
        chooseBar: function (event) {
          var self = this
          console.log()
          var el = event.currentTarget
          console.log(el.getAttribute("class"))
          if (self.Gparam.type === 1) {
            if (el.getAttribute("class") === 'marking') {
              return false
            } else {
              self.Gparam.type = 2
            }
          } else {
            if (el.getAttribute("class") === 'marking') {
              return false
            } else {
              self.Gparam.type = 1
            }
          }
        },
        applySpace: function () {
          alert('申请备件')
        },
        backSpace: function () {
          alert('坏件退回')
        },
        mark: function(item){
          if(item.isMark) {
            item.isMark = false
          } else {
            item.isMark = true
          }
        },
        changeNum: function (a,b) {
          if (a === 'sub'){
            b.usedNum--
          } else {
            b.usedNum++
          }
        }
      },
    }
</script>

<style lang="less">
  body{
    font-size: 0.13rem;
    overflow-x: hidden;
  }
  .enMySpareCenter {
    margin-bottom: 1rem;
    .top {
      display: flex;
      justify-content: space-around;
      height: 0.43rem;
      line-height: 0.43rem;
      font-size: 0.16rem;
    }

    .top div {
      width: 0.68rem;
      text-align: center;
    }
    .select {
      border-bottom: 0.01rem solid #42a3fd;
      color: #42a3fd;
    }
    .space-info {
      padding-top: 0.01rem;
      padding-bottom: 0.1rem;
      padding-left: 0.1rem;
      border-radius: 0.04rem;
      box-shadow: 0 0.02rem 0.04rem 0 #ebebeb;

    }
    .info-item {
      margin-right: 0.15rem;
    }
    .space-info li {
      height: 0.2rem;
      line-height: 0.2rem;
      margin-top: 0.1rem;
    }
    .badSpareList .space-info {
      background: url("../../assets/images/icon_nol@2x.png") no-repeat 97% center;
      background-size: 0.16rem 0.16rem;
      background-color: #fff;
    }
    .badSpareList .marking.space-info {
      background: url("../../assets/images/icon_sel@2x.png") no-repeat 97% center;
      background-size: 0.16rem 0.16rem;
      background-color: #fff;
    }

    .apply-btn {
      width: 0.75rem;
      height: 0.25rem;
      color: #fff;
      margin-top: 0.15rem;
      text-align: center;
      background-color: #42a3df;
      border-radius: 0.04rem;
      font-size: 0.12rem;
      line-height: 0.25rem;
      margin-left: 1.43rem;
    }
    .mess-item {
      margin-top: 0.1rem;
      line-height: 0.25rem;
      width: 100%;
    }
    .mess-item img {
      width: 0.07rem;
      margin-right: 0.03rem;
    }
    .mess-item .title-box {
      width: 0.52rem;
      display: flex;
      justify-content: space-between;
    }
    .mess-item .title {
      width: 0.52rem;
      margin-left: 0.1rem;
    }
    input[type="text"] {
      width: 2.71rem;
      height: 0.25rem;
      margin-left: 0.15rem;
      border-radius: 0.02rem;
      border: #dfdfdf 1px solid;
    }
    textarea {
      width: 2.71rem;
      margin-left: 0.15rem;
      border-radius: 0.02rem;
      border: #dfdfdf 1px solid;
    }
    select {
      width: 2.71rem;
      margin-left: 0.15rem;
      border-radius: 0.02rem;
      border: #dfdfdf 1px solid;
    }
    .button-box {
      margin-top: 0.07rem;
      height: 0.6rem;
      border-top: solid 1px #ebebeb;
      line-height: 0.29rem;
    }
    .top-b {
      display: flex;
      justify-content: space-between;
    }
    .picItem .filePic {
      position: relative;
      outline: 0;
      width: 0.29rem;
      height: 0.29rem;
      opacity: 0;
      z-index: 2;
    }
    .picItem {
      background: url('../../assets/images2/icon_tianjia@2x.png') no-repeat;
      -webkit-background-size: 100%;
      background-size: 100%;
    }

    .mark {
      width: 0.16rem;
      height: 0.16rem;
      margin: 0.06rem 0 0 0.05rem;
      background: url("../../assets/images/icon_nol@2x.png") no-repeat;
      -webkit-background-size: 100%;
      background-size: 100%;
    }
    .typeMark .mark {
      background: url("../../assets/images/icon_sel@2x.png") no-repeat;
      -webkit-background-size: 100%;
      background-size: 100%;
    }
    .add-item {
      float: right;
      height: 0.24rem;
      line-height: 0.24rem;
      margin-top: 0.15rem;
      padding-left: 0.29rem;
      padding-right: 0.1rem;
      background: url('../../assets/images2/icon_tianjiafeiyong@2x.png') no-repeat;
      background-size: auto 100%;
    }

    .bottom_bar {
      width: 100%;
      background: #42a3fd;
      line-height: 0.43rem;
      font-size: 0.15rem;
      text-align: center;
    }
  }
</style>
